<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				font-size: 14px;
				line-height: 20px;
			}
			
			a {
				text-decoration: none;
				color: blue;
			}
			
			a:hover {
				color: red;
			}
			
			img {
				border: 0;
				vertical-align: middle;
			}
			
			.treeStyle {
				list-style: none;
				display: none;
			}
		</style>
		<script type="text/javascript">
			function show(bookType) {
				// 如果 ul是展开的，则进行关闭
				if(document.getElementById(bookType).style.display == 'block') {
					// 收缩关闭
					document.getElementById(bookType).style.display = 'none';
					document.body.style.background="";
				} else {
					document.getElementById(bookType).style.display = 'block';
					document.body.style.background="#FFCC88 url(imgs/bg.jpg) no-repeat";
				}
			}
		</script>
	</head>

	<body>
		<b><img src="imgs/book.jpg">图书分类</b>
		<p>
			<a href="javascript:show('l&a')">&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/book1.gif">文艺</a>
		</p>
		<ul id="l&a" class="treeStyle">
			<li><img src="imgs/book2.gif">文学</li>
			<li><img src="imgs/book2.gif">传记</li>
			<li><img src="imgs/book2.gif">艺术</li>
			<li><img src="imgs/book2.gif">摄影</li>
		</ul>
		<p>
			<a href="javascript:show('succ')">&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/book1.gif">励志/成功</a>
		</p>
		<ul id="succ" class="treeStyle">
			<li><img src="images/book2.gif">职场</li>
			<li><img src="images/book2.gif">成功</li>
			<li><img src="images/book2.gif">人际</li>
			<li><img src="images/book2.gif">心灵修养</li>
		</ul>
	</body>

</html>